Getting started and navigating

Now that you have installed Elementor website builder within your WordPress site you will have at least 4 new pages created as part of the builder pack installation. This will include a home page, which is where we will start. Once you have mastered the home page the rest of the pages can be edited in the same way. So lets jump in.

Log in to your WordPress website and navigate to pages. From here you will see a page entitled ‘Home’. If you hover over this page you will see an option to ‘Edit with Elementor’. Click on this option and the page will open in the Elementor builder.

There will be elements on the page to change and as we are building within the Elementor builder we will see the changes immediately prior to clicking on update. You will see a navigator towards the right of the screen. This will allow you to navigate to sections within the home page. As you click on an element within the navigator it will be highlighted on the screen in front of you. When clicking on each element you will also see a menu with options to change in the left hand side of your screen.

Updating image elements

As mentioned above, when clicking on an element within the navigation pane you will have some options in the left hand side of the screen. These will be fairly self explanatory so in the example image we show the page from the previous section updated to include relevant text and images to suit our website build.

To change images within a carousel section, click on an image in the left hand pane. This will open up the gallery with the default images showing. You can go ahead and remove all of the default images, at which point you will see a button appear ‘Select Files’. By clicking this you can upload multiple images to your website and use in the selected carousel gallery. If you only select one image by mistake, don’t worry, simply click on the ‘Add to Gallery’ in the left hand side of the screen to add more images to the section. When finished click ‘Insert Gallery’ towards the bottom right hand side of the screen.

You will now see the updated images within the gallery carousel. Now change the images using the same process in the smaller gallery carousel. Don’t forget to click on the ‘Insert Gallery’ to update the gallery carousel.

Changing text blocks

Together with images, the text blocks can be edited in the same way. Click on an element of use the navigator to go to the section that you would like to edit. Once again, in the left hand pane you will see the options for editing the text which will include font size, HTML tag, alignment, style and colours.

Enter your text in the text box to replace what has been set by default. If the navigator box gets in the way you can simply click in the header of the navigator and move it around. If you move it to the right it should snap into place so that you can see the full screen of your home page.

To review the web page outside of the Elementor builder, click on the Eye icon towards the bottom left of your screen next to the ‘Update’ button. This will open the page in a separate tab for you to view the changes as live.

Deleting, moving and adding elements

The deleting and adding of elements within the Elementor builder is quite straightforward as well. Simply click on an element that you wish to delete and hit the delete key on your keyboard. This will remove the element straight away, no questions asked. Top Tip: If you delete something by mistake then press CTRL+Z to undo the change.

To move an element around the page, you must first ensure that it is set as ‘Absolute’ within the position field. This field can be found in the ‘Advanced’ tab within the element editor on the left hand side of your screen. Once set to ‘Absolute’ you will then be able to drag and drop the element to the position you wish it to show on the screen. Top Tip: When previewing your page, if it doesn’t show correctly first time, refresh the preview page and in some cases you may need to clear your cache.

Adding elements is easy with Elementor builder. You will need to ensure that you have clicked in an area that is outlined with dots before you can add in an element. Once in an area that you can add in elements, drag and drop elements from the left hand side pane on your screen. Top Tip: When dragging across into the main screen the system will highlight the area that you will be dropping in the element.

Finishing up and viewing the page

Editing within Elementor can take some getting used to so don’t forget to always preview changes before you commit. Also don’t forget the CTRL+Z option which essentially undoes what you have just done. Pressing CTRL+Z in succession will undo changes in a logical order the way in which you made the changes originally.

The take away from this insider knowledge article is to not be scared to ‘have a go’ and never forget that what you have done can in turn be undone.

So now that we have successfully edited our page and we are happy with the look and feel together with the functions, we can safely update the page by clicking the green ‘Update’ button.